<template>
  <van-tabbar v-model="active" @change="change">
    <van-tabbar-item icon="home-o">首页</van-tabbar-item>
    <van-tabbar-item icon="search">登录</van-tabbar-item>
    <van-tabbar-item icon="friends-o">数据列表</van-tabbar-item>
  </van-tabbar>
</template>

<script>
import { ref, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
export default {
  setup() {
    const router = useRouter();
    const route = useRoute();
    const active = ref(0);
    const change = (val) => {
      switch (val) {
        case 0:
          router.push({ name: "Home" });
          break;
        case 1:
          router.push({ name: "Login" });
          break;
        case 2:
          router.push({ name: "List" });
          break;
        
      }
      

    };
    onMounted(()=>{//组件挂载后
      if(route.name === "Home"){
        active.value = 0
      }else if(route.name === "Login"){
        active.value = 1
      }else if(route.name === "List"){
        active.value = 2
      }
    })
    return {
      change,
      active,
      route,
      router,
      onMounted
    };
  },
};
</script>

<style></style>
